/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  FlatList,

} from 'react-native';

var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');

let headUrl;

let listUrl;

export default class DetailsView extends Component {

  static navigationOptions = ({navigation,screenProps}) => {
    return {
      header: <View style={styles.headerViewStyle}>

                <TouchableOpacity onPress = {() =>
                  navigation.goBack()}>
                  <Image style={{width:22,height:22,marginLeft:10,marginTop:20}}
                    source={require('../../img/communityImg/back.png')}>
                  </Image>
                </TouchableOpacity>

                <Text style={{marginLeft:130,marginTop:23}}>{'详情'}</Text>

                <TouchableOpacity activeOpacity ={0.5} onPress = {() =>
                  navigation.navigate('PlayingListView',{name:'2-1'})}>
                  <Image
                    source={require('../../img/communityImg/littlePlaying1.png')}
                    style={styles.littlePlayingImageStyle}>
                  </Image>
                </TouchableOpacity>

              </View>
    }
  }

  constructor(props){
  	super(props);
  	this.state = {
      dataSource:[],
      headerDataSource:{},
    };
  }

  componentDidMount() {
    // console.log(this.props.navigation.state.params.itemID);
    this.requestHeaderData();
    // this.requestListData();
  }

  requestHeaderData=()=>{

    headUrl='http://yiapi.xinli001.com/fm/forum-thread-detail.json?key=c0d28ec0954084b4426223366293d190&id='+this.props.navigation.state.params.itemID

    let map = {

      method:'GET'//请求类型

    };

    map.follow = 20;//设置请求允许的最大重定向次数，0为不允许重定向
    map.timeout = 10;//设置超时时间，0为没有超时时间，这个值在重定向时会被重置

    fetch(headUrl,map)
    .then((response)=>{

      // console.log(response);

      return response.json()//对接收到的HTTP回应消息体进行JSON解析

    })
    .then((responseData)=>{

      // console.log(responseData);

      this.setState({
        headerDataSource:responseData.data
      });

      // console.log(this.state.headerDataSource);

      this.requestListData();

    })
    .catch((error)=>{
      console.log(error);
    })

  }

  requestListData = ()=>{

    listUrl='http://yiapi.xinli001.com/fm/forum-comment-list.json?key=c0d28ec0954084b4426223366293d190&offset=0&limit=10&post_id='+this.props.navigation.state.params.itemID

    let map = {

      method:'GET'//请求类型

    };

    map.follow = 20;//设置请求允许的最大重定向次数，0为不允许重定向
    map.timeout = 10;//设置超时时间，0为没有超时时间，这个值在重定向时会被重置

    fetch(listUrl,map)
    .then((response)=>{

      // console.log(response);

      return response.json()//对接收到的HTTP回应消息体进行JSON解析

    })
    .then((responseData)=>{

      // console.log(responseData);


      this.setState({dataSource:responseData.data})

    })
    .catch((error)=>{
      console.log(error);
    })

  }


  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem = {(item)=>this.renderItem(item)}
          ListHeaderComponent = {this.header}
          extraData={this.state.headerDataSource}
          ItemSeparatorComponent = {this.separate}//分割线组件，
          keyExtractor = {this.keyExtractor}
          >
        </FlatList>
        <View style={styles.bottomBaseViewStyle}>
          <View style={styles.bottomLeftViewStyle}>
            <Image
              style={styles.bottomLeftImageViewStyle}
              source={require('../../img/communityImg/tieziComment.png')}
            >

            </Image>
            <Text
              style={styles.bottomLeftTextViewStyle}
            >
              {'评论'}
            </Text>
          </View>
          <View
            style={styles.bottomViewStyle}
          >
          </View>
          <View style={styles.bottomRightViewStyle}>
            <Image
              style={styles.bottomRightImageViewStyle}
              source={require('../../img/communityImg/tieziShare.png')}>
            </Image>
            <Text
              style={styles.bottomRightTextViewStyle}
            >
              {'分享'}
            </Text>
          </View>
        </View>
      </View>
    );
  }

  renderItem(item){

    // console.log(item);

    return(
      <View style={styles.listItemViewStyle}>
        <Image
          style={styles.listImageViewStyle}
          source={{uri:item.item.user.avatar}}>
        </Image>

        <View style={styles.listItemRightViewStyle}>
          <Text style={styles.nameTextStyle}>
            {item.item.floor+'楼 '+item.item.user.nickname}
          </Text>

          <Text style={styles.commentTextStyle}>{item.item.content}</Text>

          <Text style={styles.timeTextStyle}>{item.item.created}</Text>
        </View>
      </View>
    )
  }

  header=()=>{

    if (this.isEmptyObject(this.state.headerDataSource)) {
      // console.log(this.state.headerDataSource);
      return(
        <View style={styles.headerListViewStyle}>
          <View style={styles.itemTopView}>
            <Image
              style={styles.itemImageViewStyle}
              source={{uri:this.state.headerDataSource.user.avatar}}>
            </Image>

            <View style={styles.titleViewStyle}>
              <Text style={styles.headerNameTextStyle}>
                {this.state.headerDataSource.user.nickname}
              </Text>
              <Text style={styles.updatedTextStyle}>
                {this.state.headerDataSource.created}
              </Text>
            </View>
          </View>
          <Text
            style={styles.titleTextStyle}>
            {this.state.headerDataSource.title}
          </Text>
          <Text
            style={styles.contentTextStyle}
            >
            {this.state.headerDataSource.content}
          </Text>

          <View style={styles.innerAllImageContentStyle}>
            {this.renderAllImages(this.state.headerDataSource.images)}
          </View>
          <View style ={{height:10,backgroundColor:'lightgray'}}>

          </View>
        </View>
      )
    }else{
      console.log('可惜我是在这里');
      return(
        <View></View>
      )
    }

  }

  separate=()=>{

    return <View style ={{height:0.5,backgroundColor:'lightgray'}}/>
  }

  keyExtractor(item, index){

    console.log(item);

    return item.id;

  }

  renderAllImages =(images)=>{

    // console.log(item);

    var allImages = [];

    if (images.length>0) {

      for(let i =0; i<images.length;i++){
        var imageContent = images[i];

        allImages.push(
        <View key ={i} style ={styles.innerImagesStyle}>
          <Image source ={{uri:imageContent}} style ={styles.imageContentStyle}/>
        </View>
        );
      }
    }
    return allImages;

  }

  isEmptyObject(obj){
    for (var n in obj) {
        return true
    }
    return false;
  }


}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerViewStyle:{
    flexDirection:'row',
    height:55,
    width:width,
    backgroundColor:'white',
    // flex:1,
  },
  littlePlayingImageStyle:{
    height:18,
    width:17,
    marginLeft:155,
    marginTop:25,
  },
  listImageViewStyle:{
    height:30,
    width:30,
    marginLeft:10,
    marginTop:10,
  },
  listItemViewStyle:{
    flexDirection:'row',
    backgroundColor:'white',
  },
  listItemRightViewStyle:{
    marginLeft:10,
    marginTop:10,
    width:width-60,
  },
  nameTextStyle:{
    fontSize:13,
    color:'lightgray',
  },
  commentTextStyle:{
    marginTop:14,
    fontSize:13,
    color:'black',
  },
  timeTextStyle:{
    marginTop:10,
    fontSize:11,
    color:'lightgray',
    height:20,
  },
  headerListViewStyle:{
    backgroundColor:'white',
    // height:30,
  },
  itemTopView:{
    // 改变主轴的方向
    flexDirection:'row',
    marginTop:10,
    width:width,
    // backgroundColor:'red'
  },
  itemImageViewStyle:{
    width:32,
    height:32,
    marginLeft:10,
  },
  titleViewStyle:{
    marginLeft:10,
  },
  headerNameTextStyle:{
    fontSize:13,
    color:'gray',
    marginTop:0,
    width:200,
  },
  updatedTextStyle:{
    fontSize:10,
    color:'lightgray',
    marginTop:4,
  },
  titleTextStyle:{
    color:'black',
    fontSize:15,
    marginTop:10,
    marginLeft:8,
  },
  contentTextStyle:{
    color:'lightgray',
    fontSize:13,
    margin:8,
    lineHeight:20,
  },
  innerImagesStyle:{
  width:width-20,
  height:width-20,
  marginLeft:10,
  marginTop:10,
  marginBottom:10,
  backgroundColor:'blue',
  },
  imageContentStyle:{
    width:width-20,
    height:width-20,
  },
  bottomBaseViewStyle:{
    width:width,
    height:50,
    backgroundColor:'black',
    flexDirection:'row',
  },
  bottomLeftViewStyle:{
    width:width/2-0.5,
    height:50,
    // backgroundColor:'yellow',
    flexDirection:'row',
  },
  bottomRightViewStyle:{
    width:width/2-0.5,
    height:50,
    // backgroundColor:'blue',
    flexDirection:'row',
  },
  bottomLeftImageViewStyle:{
    width:22,
    height:22,
    marginTop:14,
    marginLeft:50,
  },
  bottomRightImageViewStyle:{
    width:22,
    height:22,
    marginTop:14,
    marginLeft:50,
  },
  bottomLeftTextViewStyle:{
    // width:22,
    // height:22,
    marginTop:16,
    marginLeft:15,
    color:'white',
  },
  bottomRightTextViewStyle:{
    // width:22,
    // height:22,
    marginTop:16,
    marginLeft:15,
    color:'white',
  },
  bottomViewStyle:{
    width:1,
    height:20,
    marginTop:15,
    backgroundColor:'white',
  }
});
